<template>
  <a-modal
    v-model:visible="visible"
    @ok="handleOk"
    ok-text="确定"
    cancel-text="取消"
    :title='"用户："+item.mobile +"（ID:"+item.user_id+"）更新等级"'
  >
    <a-form
      ref="formRef"
      :model="modelRef"
      :rules="rulesRef"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="当前等级">
        <a>{{ item.grade?item.grade.name:'---' }}</a>
      </a-form-item>
      <a-form-item label="用户等级" name="grade_id">
        <a-select v-model:value="modelRef.grade_id">
          <a-select-option :value="0">无任何等级</a-select-option>
          <a-select-option v-for="(val,key) in gradeList" :key="key" :value="val.grade_id">{{val.name}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="变动说明" name="remark">
        <a-mentions v-model:value="modelRef.remark" rows="3" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { toRefs, reactive, nextTick,defineComponent } from "vue";
import { notice } from "@/config";
import { updateGrade } from "@/api/user/List";
export default defineComponent({
  setup(props, { emit }) {
    let state = reactive({
      visible: false,
      formRef: {},
      item: {},
      gradeList: [],
    });
    let modelRef = reactive({
      user_id: 0,
      grade_id: 0,
      remark: "",
    });
    let rulesRef = reactive({
      grade_id: [
        {
          required: true,
          message: "请选择等级",
        },
      ],
      remark: [
        {
          required: true,
          message: "请输入说明",
        },
      ],
      
    });
    // 显示对话框
    const show = (item, gradeList) => {
      state.item = item
      state.visible = state.visible ? false : true
      modelRef.user_id = item.user_id
      modelRef.grade_id = item.grade_id
      state.gradeList = gradeList
      nextTick(() => {
        state.formRef.resetFields()
      })
    };

    const handleOk = () => {
      state.formRef.validate().then(() => {
        updateGrade(modelRef).then((res) => {
          emit("okCallback", res);
          notice(res.status == 200 ? "success" : "error", res.message);
          state.visible = false;
        });
      });
    };

    return {
      show,
      handleOk,
      ...toRefs(state),
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 16,
      },
      modelRef,
      rulesRef,
    };
  },
});
</script>
